<template>
    <div class="table-view historical-list">
        <div class="table">
            <div class="table-title">
                <div v-for="(item, index) in titleList" :key="index" :class="item.class">
                    {{ item.title }}</div>
            </div>
            <div class="table-list" ref="historicalList">
                <div class="historical-list-item" v-for="(item, index) in list" :key="index" @mouseover="stopScroll" @mouseout="startScroll">
                    <div v-for="(value, key) in titleList" :key="key" :class="value.class"
                        :title="value.style == 'flex:3; white-space: nowrap; overflow: hidden;text-overflow: ellipsis;' ? item[value.value] : ''"
                        :style="value.style || ''" @click="value.value == 'caozuo' ? showHand(item) : ''"> <span
                            :style="item[value.value] == '处理中' ? 'color:#ffce58;' : ''">{{ item[value.value] }}</span></div>
                </div>
            </div>
        </div>
        <div v-if="isShow" class="dialog-view">
            <div class="dialog-view-content">
                <!-- 标题 -->
                <div class="dialog-view-title">
                    <div class="title">报警信息</div>
                    <div class="element" @click="isShow = !isShow">X</div>
                </div>
                <!-- 内容 -->
                <div class="dialog-view-content-box">
                    <!-- 左侧内容 -->
                    <div class="dialog-view-content-box-left">
                        <div class="dialog-view-content-box-left-img">
                            <p class="title">报警图片</p>
                            <img :src="waringImg" />
                        </div>
                        <div class="dialog-view-content-box-left-text">
                            <p class="title">报警信息</p>
                            <p class="main-text">{{ dialogInfo.xiaoxi }}</p>
                        </div>
                        <div class="dialog-view-content-box-left-text">
                            <p class="title">违规车辆信息</p>
                            <p style="margin-bottom: 10px;">&nbsp;&nbsp;&nbsp;&nbsp;车牌号：{{ dialogInfo.paizi }}</p>
                            <p>入场时间：{{ dialogInfo.shijian }}</p>
                        </div>
                    </div>
                    <!-- 右侧内容 -->
                    <div class="dialog-view-content-box-right">
                        <div class="dialog-view-content-box-right-text">
                            <p class="title">处理结果</p>
                            <textarea style="width:343.8px; height: 249px; padding: 5px; border: none"></textarea>
                        </div>
                        <div class="dialog-view-content-box-right-btn">
                            <div class="check" @click="bbb">提交处理</div>
                            <div class="check" @click="isShow = !isShow">取 消</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TableView',
    mixins: [],
    components: {},
    props: ['titleList', "list"],
    data() {
        return {
            isShow: false,
            dialogInfo: {},
            scrollInterval:null
        }
    },
    destroyed() {
        // 在组件销毁时清除定时器
        clearInterval(this.scrollInterval);
    },
    computed: {},
    watch: {},
    created() { },
    mounted() {
        const historicalList = this.$refs.historicalList;
        // 开始自动滚动
        this.scrollContainer(historicalList);
    },
    methods: {
        // 启动滚动
        startScroll() {
            // 每隔 50 毫秒调用一次 scrollContainer 方法
            this.scrollInterval = setInterval(this.scrollContainer, 50);
        },
        // 停止滚动
        stopScroll() {
            // 清除之前设置的滚动计时器
            clearInterval(this.scrollInterval);
        },
        bbb() {
            if (this.list.length == 1) {
                this.$emit('aaa', 0)
            } else {
                this.$emit('aaa', 1)
            }
            this.isShow = !this.isShow
        },
        //查看方法
        showHand(item) {
            // console.info("data === ", item)
            // this.isShow = !this.isShow
            // this.dialogInfo = item
            this.$emit('showHand', item)
        },
        // 滚动逻辑
        scrollContainer() {
            const container = this.$refs.historicalList;
            const scrollHeight = container.scrollHeight;
            const clientHeight = container.clientHeight;
            const maxScrollTop = scrollHeight - clientHeight;

            // 使用 Math.ceil() 确保比较的准确性
            if (Math.ceil(container.scrollTop) >= Math.ceil(maxScrollTop)) {
                container.scrollTop = 0;
            } else {
                container.scrollTop += 2;
            }
        }
    },
}
</script>
<style lang="scss" scoped>
.table-view {
    color: #fff;
    //position: relative;
    width: calc(100% - 35px);
    margin-left: 10px;
    //border: 2px solid #80BCF3;
    //border-radius: 10px;
    //padding: 8px;
    height: calc(100% - 10px);

    .table {
        font-size: 8px;
        height: 100%;

        .table-title {
            display: flex;
            height: 40px;
            align-items: center;
            text-align: center;

            .table-title-no-long {
                font-size: 11px;
                flex: 1;
            }

            .table-title-long {
                flex: 2;
                font-size: 11px;
            }

            .table-title-long2 {
                flex: 3;
            }
        }

        .table-list {
            height: calc(100% - 40px);
            overflow-y: scroll;

            .historical-list-item {
                display: flex;
                width: 100%;
                height: 25px;
                align-items: center;
                text-align: center;

                .table-title-no-long {
                    flex: 1;
                    font-size: 9px;
                }

                .table-title-long {
                    flex: 2;
                    font-size: 9px;
                }
            }

            .historical-list-item:nth-child(odd) {
                // 单
                background-image: url(".../../../../assets/newImg/tableBg2.png");
                /* 使背景图片铺满整个元素 */
                background-size: cover;
                background-repeat: no-repeat;
                /* 防止图片重复 */
                background-size: 450px 33px;
            }

            .historical-list-item:nth-child(even) {
                // 双

            }
        }
    }

    .dialog-view {
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999999999;
        top: 0;
        left: 0;

        .dialog-view-content {
            height: 581px;
            width: 900px;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-image: url('../../assets//img/bg2.svg');
            /* 背景图片铺满整个元素 */
            background-size: cover;

            /* 确保背景图片不重复 */
            background-repeat: no-repeat;

            /* 确保背景图片随元素一起缩放 */
            background-attachment: fixed;

            /* 确保背景图片在元素内居中 */
            background-position: center;

            .dialog-view-title {
                padding: 30px 46px;
                display: flex;
                height: 40px;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 0px;

                .title {
                    font-size: 20px;
                    font-weight: 700;
                    color: #fff;
                }

                .element {
                    font-size: 20px;
                    font-weight: 700;
                    color: #fff;
                }

                .element:hover {
                    cursor: pointer;
                }

                div {
                    font-size: 18px;
                    font-weight: 700;
                    color: #fff;
                }
            }

            .dialog-view-content-box {
                display: flex;
                padding: 10px 60px;

                .dialog-view-content-box-left {
                    .dialog-view-content-box-left-img {
                        margin-bottom: 20px;

                        .title {
                            font-size: 16px;
                            font-weight: 700;
                            color: #fff;
                            margin-bottom: 10px;
                        }

                        img {
                            width: 343.8px;
                            height: 249px;
                        }
                    }

                    .dialog-view-content-box-left-text {
                        margin-bottom: 20px;

                        .title {
                            font-size: 16px;
                            font-weight: 700;
                            color: #fff;
                            margin-bottom: 10px;
                        }

                        .main-text {
                            font-size: 16px;
                            font-weight: 700;
                            color: red;
                        }
                    }
                }

                .dialog-view-content-box-right {
                    margin-left: 50px;

                    .dialog-view-content-box-right-text {
                        .title {
                            font-size: 16px;
                            font-weight: 700;
                            color: #fff;
                            margin-bottom: 10px;
                        }

                        textarea {
                            width: 343.8px;
                            height: 249px;
                            padding: 5px;
                            border: none;
                        }
                    }

                    .dialog-view-content-box-right-btn {
                        height: 210px;
                        text-align: right;
                        text-align: center;
                        display: flex;
                        justify-content: end;
                        align-items: self-end;

                        .check {
                            width: 166px;
                            height: 52px;
                            line-height: 52px;
                            text-align: center;
                            font-size: 18px;
                            font-weight: 700;
                            color: #fff;
                            margin-left: 10px;

                            background-color: #09DEFF;
                            border-radius: 5px;
                            background-image: url('../../assets//img/btn.png');
                            /* 背景图片铺满整个元素 */
                            background-size: cover;

                            /* 确保背景图片不重复 */
                            background-repeat: no-repeat;

                            /* 确保背景图片随元素一起缩放 */
                            background-attachment: fixed;

                            /* 确保背景图片在元素内居中 */
                            background-position: center;
                        }
                    }
                }
            }
        }
    }
}
</style>